<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>复焕集 - 编辑资料</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="icon" href="img/headLogo.png" type="image/png">
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/informationModification.css" />
</head>
<body>
	<div class="container-fluid fixed-top  navbar-custom" id="top">
			<nav class="navbar navbar-expand-lg" role="navigation">

				<div class="container position-relative">
					<a href="index.jsp" class="navbar-brand navbar-b-custom font-logo">
						<img src="img/headLogo.png" alt="" id="headImage">
					</a>
					<!-- 搜索条 -->
					<form action="searchGoodsDo" method="get">
						<div class="d-flex position-absolute start-50 translate-middle-x serchBar">
							<input  name="searchName" type="text" class="form-control1 form-control-sm" id="searchBar" />
							<button class="btn btn-primary ms-2 serchBut" id="searchBtn">搜索</button>
						</div>
					</form>
					<!-- 右侧用户信息栏 -->



					<c:choose>
						<c:when test="${not empty sessionScope.logInUser}">
							<ul class="navbar-nav mb-2 mb-lg-0 align-items-center">
								<li class="nav-item d-flex align-items-center">
									<img src=${logInUser.headimg} alt="" class="headimg align-self-center">
								</li>
								<li class="nav-item">
									<a href="mineInformation.jsp" class="nav-link navbar-a-custom" id="">个人主页</a>
								</li>
								<li class="nav-item">
									<a href="order.jsp" class="nav-link navbar-a-custom">我的订单</a>
								</li>
								<li class="nav-item">
									<a href="userLogOut" class="nav-link navbar-a-custom">退出</a>
								</li>
							</ul>
						</c:when>
						<c:otherwise>
							<ul class="navbar-nav mb-2 mb-lg-0 align-items-center">
								<li class="nav-item"><a href="#" class="nav-link navbar-a-custom" id="sign">注册</a></li>
								<li class="nav-item"><a href="#" class="nav-link navbar-a-custom" id="login">登录</a></li>
							</ul>
						</c:otherwise>
					</c:choose>

				</div>
			</nav>
		</div>

	<!-- 编辑资料内容区 -->
	<div class="main-content">
		<div class="edit-profile-container">
			<div class="profile-header">
				<h2>编辑个人资料</h2>
				<p>完善您的个人信息，让买家更了解您</p>

				<div class="avatar-upload" id="avatarUpload">
					<img src=${logInUser.headimg} alt="用户头像" class="avatar-preview"
						id="avatarPreview">
					<div class="edit-icon">
						<i class="fas fa-camera"></i>
					</div>
					<input type="file" id="avatarInput" accept="image/*"
						style="display: none;">
				</div>
			</div>

			<form id="profileForm">
				<div class="form-section">
					<div class="section-title">
						<i class="fas fa-user"></i> 基本信息
					</div>

					<div class="mb-4">
						<label class="form-label">用户名</label> 
						<input type="text" class="form-control" value=${logInUser.username} 
							id="usernameInput" name="username" required>
						<div class="form-text">4-20个字符，可包含汉字、字母、数字</div>
					</div>

					<div class="row mb-4">
						<div class="col-md-6">
							<label class="form-label">性别</label> 
							<select class="form-select" id="sexSelect" name="sex">
								<option value="1">男</option>
								<option value="2">女</option>
								<option value="3" selected>保密</option>
							</select>
						</div>
						<div class="col-md-6">
							<label class="form-label">生日</label> 
							<input type="date" class="form-control" value="2000-01-01" 
								id="birthdayInput" name="birthday">
						</div>
					</div>

					<div class="mb-4">
						<label class="form-label">所在地</label>
						<div class="row">
							<div class="col-md-4 mb-3 mb-md-0">
								<select class="form-select address-selector province" name="province">
									<option value="">选择省份</option>
								</select>
							</div>
							<div class="col-md-4 mb-3 mb-md-0">
								<select class="form-select address-selector city" name="city">
									<option value="">选择城市</option>
								</select>
							</div>
							<div class="col-md-4">
								<select class="form-select address-selector district" name="district">
									<option value="">选择区县</option>
								</select>
							</div>
						</div>
					</div>
				</div>

				<div class="form-section">
					<div class="section-title">
						<i class="fas fa-file-alt"></i> 个人简介
					</div>

					<div class="mb-4">
						<label class="form-label">自我介绍</label>
						<textarea class="form-control" rows="4" id="introduceTextarea"
							name="introduce" placeholder="介绍一下自己，让买家更了解您...">${logInUser.introduce}</textarea>
						<div class="form-text">不超过200个字符</div>
					</div>

					<div class="mb-4">
						<label class="form-label">个人标签</label>
						<div class="tags-container" id="tagsContainer">
							<div class="tag-item">
								诚信卖家 <span class="remove-tag"><i class="fas fa-times"></i></span>
							</div>
							<div class="tag-item">
								数码达人 <span class="remove-tag"><i class="fas fa-times"></i></span>
							</div>
							<div class="tag-item">
								快速发货 <span class="remove-tag"><i class="fas fa-times"></i></span>
							</div>
							<div class="tag-item">
								7天无理由 <span class="remove-tag"><i class="fas fa-times"></i></span>
							</div>
						</div>

						<div class="tag-input">
							<input type="text" class="form-control" id="newTagInput"
								placeholder="添加新标签...">
							<button type="button" class="btn btn-add-tag" id="addTagBtn">
								<i class="fas fa-plus"></i>
							</button>
						</div>
						<div class="form-text">标签可以让买家快速了解您的特点</div>
					</div>
				</div>

				<div class="form-section">
					<div class="section-title">
						<i class="fas fa-lock"></i> 账号安全
					</div>

					<div class="mb-4">
						<label class="form-label">手机号码</label>
						<div class="input-group">
							<input type="tel" class="form-control" value=${logInUser.phonenum} 
								name="phoneNum" id="phoneInput">
							<button class="btn btn-outline-primary" type="button">更换</button>
						</div>
					</div>

					<div class="mb-4">
						<label class="form-label">修改密码</label> 
						<input type="password" class="form-control" placeholder="输入新密码" 
							id="passwordInput" name="password">
					</div>
				</div>

				<button type="submit" class="btn btn-submit">保存修改</button>
			</form>
		</div>
	</div>

	<!-- 底部区 -->
	<!-- 底部区 -->
		<footer class="container-fluid bottom p-3 mt-auto" id="footer">
			<div class="font-logo infoLeft mx-auto">
				<strong>复焕集 </strong>旧物也能焕然一新的二手市场。
			</div>
			<div class="container">
				<div class="d-flex flex-wrap justify-content-between">
					<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
						<strong>关于我们</strong>
						<li><a href="">公司介绍</a></li>
						<li><a href="">团队介绍</a></li>
						<li><a href="">媒体报道</a></li>
						<li><a href="">加入我们</a></li>
					</ul>
					<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
						<strong>帮助中心</strong>
						<li><a href="">新手入门</a></li>
						<li><a href="">交易流程</a></li>
						<li><a href="">常见问题</a></li>
						<li><a href="">安全指南</a></li>
					</ul>
					<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
						<strong>规则中心</strong>
						<li><a href="">用户协议</a></li>
						<li><a href="">隐私政策</a></li>
						<li><a href="">交易规则</a></li>
						<li><a href="">社区公约</a></li>
					</ul>
					<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
						<strong>联系我们</strong>
						<li><a href="">客服电话：400-114-514</a></li>
						<li><a href="">商务合作：bd@fuhuanji.com</a></li>
						<li><a href="">举报反馈：report@fuhuanji.com</a></li>
					</ul>
				</div>
			</div>
			<div class="copyright">
				© 2023 复焕集 All Rights Reserved. 蜀ICP备12345678号
			</div>
		</footer>

	<script src="js/jquery.js"></script>
	<script src="js/informationModification.js"></script>
</body>
</html>